<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>可视区域加载</title>
  </head>
  <style>
    #showDiv {
      width: 500px;
      height: 350px;
      background-color: red;
      margin: 1000px auto 0 auto;
    }
    @-webkit-keyframes fadeInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
      100% {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
      }
    }
    .fadeInLeft {
      animation-name: fadeInLeft;
      -webkit-animation-name: fadeInLeft;
      animation-duration: 2s;
      -webkit-animation-duration: 2s;
    }
  </style>
  <body>
    <div id="showDiv"></div>
  </body>
  <script>
    function showDiv() {
      var showId = document.getElementById("showDiv");
      var clients =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      var divTop = showId.getBoundingClientRect().top;
      if (divTop <= clients) {
        showId.classList.add("fadeInLeft");
      } else {
        showId.classList.remove("fadeInLeft");
      }
    }
    window.onscroll = showDiv;
  </script>
</html>
